<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
    <style>
        *{
            padding:0;
            list-style: none;
            text-decoration: none;
            font-weight:100;
            font-family:"微软雅黑";
            margin:0;
        }
        body{
            height:100%;
        }
        span{
            font:15px/33px 微软雅黑;
            display:inline-block;
        }
        b{
            font-weight:600 !important;
            color:black;
            line-height:60px !important;
        }
        h4{
            font:22px/34px 微软雅黑;
            color:black;
        }
        h3{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2a3137;
            line-height:34px;
        }
        .title{
            line-height:25px;
            margin-bottom: 5px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
        }
        .title1{
            line-height:25px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
            margin-top:5px;
        }
        .test p{
            width:100%;
            line-height:100px;
            font-size:15px;
            text-align:center;
        }
        thead tr th{
            text-align:center;
        }
        .table tr{
            height:42px;
        }
        /*thead hr{*/
        /*border-top: none !important;*/
        /*border-bottom: none !important;*/
        /*}*/
        #tablepart #example tr{
            border:none !important;
        }
        #tablepart #example tbody tr td{
            border:none !important;
            font:15px/42px 微软雅黑
        }
        #tablepart #example tbody tr{
            height:42px !important;
        }
        #tablepart #example thead tr th{
            color:#999999 !important;
            font:15px/42px 微软雅黑;
            border:none !important;
        }
        .dataTable{
            text-align:center;
        }
        .daterange i {
            position: absolute;
            bottom: 10px;
            right: 14px;
            top: auto;
            cursor: pointer;
        }
        .daterange {
            position: relative;
        }
        .container1{
            display:inline-block;
            width:100%;
            margin-top:12px;
        }
        .times{
            display:inline-block;
            width:150px;
        }
        .pagination{
            float:right !important;
        }
        .btn{
            width:100px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            line-height:18px;
            background:#35acfd
        }
        #tablepart #example tbody tr{
            border-bottom:1px solid #e6e6e6 !important;
        }
        img{
            max-width:100%;
            height:auto;
        }
        a{
            text-decoration:none;
        }
        .page_nav li{
            list-style:none !important;
        }
        thead tr{
            background:#e6e6e6;
        }
        input{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
        }
        .changelist{
            display:inline-block;
            position:relative;
            top:20px;
            width:580px;
            height:34px;
            float:right;
            margin-right:30px;
        }
        .changelist li{
            float:left;
            height:34px;
            margin-right:30px;
            width:84px;
            border-radius: 17px;
        }
        .changelist li button{
            width: 84px;
            line-height: 34px;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            border:none;
            border-radius: 17px;
            color:#999999;
            background:none;
            outline:none;
        }
        .active_button{
            background:#35acfd !important;
            color:white !important;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div class="wrap">
    <div id="main" class="content">
        <div style="width:99%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);">
            <div class="test" style="margin-left:19px;width:97%;">
                <div style="width:100%;overflow:hidden;">
                    <h3 style="display:inline-block">血脂信息</h3>
                    <ul class="changelist">
                        <li>
                            <button>日</button>
                        </li>
                        <li>
                            <button>周</button>
                        </li>
                        <li>
                            <button class="active_button">月</button>
                        </li>
                        <li>
                            <button>季度</button>
                        </li>
                        <li>
                            <button>年</button>
                        </li>
                    </ul>
                </div>
                <div v-if="!mainbar" id="mainBar" style="height:280px;width:100%;margin-top:14px;"></div>
                <p v-else="mainbar">暂无数据</p>
            </div>
        </div>
        <div style="width:98%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);margin-top:20px;">
            <div class="test" style="margin-left:19px;width:95%;">
                <div style="width:100%;overflow:hidden;">
                    <h3>血脂报告</h3>
                </div>
                <div class="container1" class="row">
                    <span style="display:inline-block;text-align:center;float:left;width:71px;"> 时间</span>
                    <div style="display:inline-block;float:left;">
                        <div class="times">
                            <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                                <input id="beginDate" type="text" class="lay-date" placeholder="  开始日期" readonly>
                            </div>
                        </div>
                        <div class="times" style="margin-left:24px;">
                            <div id="NextTime" class="input-group date form_date" style="width: 100%" data-date-format="yyyy-mm-dd">
                                <input id="endDate" type="text" class="lay-date" placeholder="  结束日期" readonly>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-info" onclick="search();" style="margin-left:20px;">
                        <img src="../assets/images/search.png" alt="" style="width:18px;"> 搜索
                    </button>
                </div>
                <div id="tablepart">
                    <table id="example" class="display" cellspacing="10" width="95%">
                        <thead>
                        <tr style="bordr:none !important;cursor:auto !important">
                            <th style="width:8% !important">异常</th>
                            <th style="width:18% !important">检测时间</th>
                            <th style="width:18% !important">高胆固醇</th>
                            <th style="width:18% !important">三酰甘油</th>
                            <th style="width:18% !important">高密度脂蛋白胆固醇</th>
                            <th style="width:18% !important">低密度脂蛋白胆固醇</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#main",
        data:{
            // 血压数据
            BfInfo:{
                data:[],
                data1:[],
                data2:[],
                firstjson:[],
                secondjson:[],
                thirdjson:[],
                fourthjson:[]
            },
            mainbar:false,
            show:false,
            bpjson:'',
            tablejson:[],
            dates:''
        },
        methods:{
            changejson : function(data,n){
                var newdate = []
                var firstjson = []
                var secondjson = []
                var thirdjson = []
                var fourthjson = []
                var newdate1 = []
                var newdate2 = []
                var data1 = []
                var datas = []
                var data2 = []
                let that = this;
                if( n === 1 ){
                    if( data.length != 0  ){
                        for (var a = 0; a < data.length; a++) {
                            secondjson.push(data[a].valueTg)
                            thirdjson.push(data[a].valueHdl)
                            firstjson.push(data[a].valueTc)
                            fourthjson.push(data[a].valueLdl)
                            datas.push(data[a].TestTime)
                        }
                    }else{
                        that.BfInfo.firstjson = ""
                        that.BfInfo.secondjson = ""
                        that.BfInfo.thirdjson = ""
                        that.BfInfo.fourthjson = ""
                    }
                    that.echart1(datas,firstjson,secondjson,thirdjson,fourthjson)
                }else{
                    if( data.length != 0  ){
                        for (var a = 0; a < data.length; a++) {
                            if (data[a].testItemCode === '502001') {
                                newdate.push(data[a].testTime)
                                datas = newdate
                                firstjson.push(data[a].testValue)
                            }else if ( data[a].testItemCode === '502002' ) {
                                secondjson.push(data[a].testValue)
                                newdate1.push(data[a].testTime)
                                data1 = newdate1
                            }else if ( data[a].testItemCode === '502003' ) {
                                thirdjson.push(data[a].testValue)
                                newdate2.push(data[a].testTime)
                                data2 = newdate2
                            }else if ( data[a].testItemCode === '502004' ) {
                                fourthjson.push(data[a].testValue)
                            }
                        }
                    }else{
                        that.BfInfo.firstjson = []
                        that.BfInfo.secondjson = []
                        that.BfInfo.thirdjson = []
                        that.BfInfo.fourthjson = []
                    }
                    that.echart(datas,firstjson,data1,secondjson,thirdjson,data2,fourthjson)
                }
            },
            add:function(n,date){
                var str = ''
                var d = new Date(date);
                if (d == "Invalid Date") {
                    alert("非日期");
                    return;
                }
                //当前日期的毫秒数 + 天数 * 一天的毫秒数
                var n = d.getTime() + 1 * 24 * 60 * 60 * 1000;
                var result = new Date(n);
                str = result.getFullYear() + "-" + (result.getMonth() + 1) + "-" + result.getDate();
                return str
            },
            echart : function (datas,firstjson,data1,secondjson,thirdjson,data2,fourthjson){
                let that = this;
                console.log(firstjson)
                var myChart = echarts.init(document.getElementById('mainBar'))
                myChart.setOption({
                    'tooltip' : {
                        'trigger': 'axis',
                        formatter:function(params){
                            var str = ''
                            for( var i = 0; i < params.length; i++ ){
                                if( params.length === '0' || params[0].value.length != 2 ){
                                    str += ""
                                }else{
                                    if( !params[i].data[1] ){
                                        params[i].data[1] = ""
                                    }
                                    str += params[i].marker+params[i].seriesName+":"+params[i].data[1]+"<br>"
                                }
                            }
                            if( params.length === '0' || params[0].value.length != 2 ){
                                str += ""
                            }else{
                                params.push({
                                    time : params[0].data[0]
                                })
                                str += '检查时间' + ':' + params[params.length-1].time
                            }
                            return str
                        }
                    },
                    'xAxis' : [{
                        'type':'time',
                        'boundaryGap':true,
                        'splitNumber':5,
                        'axisLabel':{
                            'intreval':'auto',
                            'textStyle':{
                                'color':'black',
                                'fontSize':'14'
                            }
                        },
                        'splitLine':{
                            'show':false
                        },
                        'axisLine':{
                            'lineStyle':{
                                'color':'#b6b6b6'
                            }
                        },
                        'axisTick':{
                            'show':false
                        }
                    }],
                    'series' : [
                        {
                            'name': 'x轴时间',
                            'type': 'line',
                            'data': (function () {
                                var d = [];
                                for( var len = 0; len < that.dates.length; len++ ){
                                    d.push([
                                        that.dates[len]
                                    ]);
                                }
                                return d;
                            })()
                        },
                        {
                            'name':'TC(总胆固醇)',
                            'type':'line',
                            'data': (function () {
                                var d = [];
                                for( var len = 0; len < firstjson.length; len++ ){
                                    d.push([
                                        datas[len],
                                        firstjson[len]
                                    ]);
                                }
                                return d;
                            })(),
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#3a85ff',
                                    'lineStyle':{
                                        'color':'#3a85ff'
                                    }
                                }
                            }
                        },
                        {
                            'name':'TG(三酰甘油)',
                            'type':'line',
                            'data': (function () {
                                var d = [];
                                for( var len = 0; len < secondjson.length; len++ ){
                                    d.push([
                                        data1[len],
                                        secondjson[len]
                                    ]);
                                }
                                return d;
                            })(),
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#00d2cb',
                                    'lineStyle':{
                                        'color':'#00d2cb'
                                    }
                                }
                            }
                        },
                        {
                            'name':'HDL-C(高密度脂蛋白胆固醇)',
                            'type':'line',
                            'data': (function () {
                                var d = [];
                                for( var len = 0; len < thirdjson.length; len++ ){
                                    d.push([
                                        data2[len],
                                        thirdjson[len]
                                    ]);
                                }
                                return d;
                            })(),
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#625bf7',
                                    'lineStyle':{
                                        'color':'#625bf7'
                                    }
                                }
                            }
                        },
                        {
                            'name':'LDL(低密度脂蛋白胆固醇)',
                            'type':'line',
                            'data': (function () {
                                var d = [];
                                for( var len = 0; len < thirdjson.length; len++ ){
                                    d.push([
                                        data2[len],
                                        fourthjson[len]
                                    ]);
                                }
                                return d;
                            })(),
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#2c88b8',
                                    'lineStyle':{
                                        'color':'#2c88b8'
                                    }
                                }
                            }
                        }
                    ]
                })
            },
            echart1 : function (datas,firstjson,secondjson,thirdjson,fourthjson){
                datas = datas.reverse();
                firstjson = firstjson.reverse();
                secondjson = secondjson.reverse();
                thirdjson = thirdjson.reverse();
                fourthjson = thirdjson.reverse();
                let that = this;
                var myChart = echarts.init(document.getElementById('mainBar'))
                myChart.setOption({
                    'tooltip' : {
                        'trigger': 'axis',
                        formatter:function(params) {
                            var str = ''
                            for (var i = 0; i < params.length; i++) {
                                if (params.length === '0') {
                                    str += ""
                                } else {
                                    if (!params[i].data) {
                                        params[i].data = ""
                                    }
                                    str += params[i].marker + params[i].seriesName + ":" + params[i].data + "<br>"
                                }
                            }
                            if (params.length === '0') {
                                str += ""
                            } else {
                                params.push({
                                    time: params[0].axisValue
                                })
                                str += '检查时间' + ':' + params[params.length - 1].time
                            }
                            return str
                        }
                    },
                    'xAxis' : [{
                        'type':'category',
                        'axisLabel':{'interval': 0},
                        'data':datas,
                        'axisLabel':{
                            'intreval':'auto',
                            'textStyle':{
                                'color':'black',
                                'fontSize':'14'
                            },
                            'formatter':function(value){
                                return value.slice(0,10)
                            }
                        },
                        'splitLine':{
                            'show':false
                        },
                        'axisLine':{
                            'lineStyle':{
                                'color':'#b6b6b6'
                            }
                        },
                        'axisTick':{
                            'show':false
                        }
                    }],
                    'series' : [
                        {
                            'name':'TC(总胆固醇)',
                            'type':'line',
                            'data': firstjson,
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#3a85ff',
                                    'lineStyle':{
                                        'color':'#3a85ff'
                                    }
                                }
                            }
                        },
                        {
                            'name':'TG(三酰甘油)',
                            'type':'line',
                            'data': secondjson,
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#00d2cb',
                                    'lineStyle':{
                                        'color':'#00d2cb'
                                    }
                                }
                            }
                        },
                        {
                            'name':'HDL-C(高密度脂蛋白胆固醇)',
                            'type':'line',
                            'data': thirdjson,
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#625bf7',
                                    'lineStyle':{
                                        'color':'#625bf7'
                                    }
                                }
                            }
                        },
                        {
                            'name':'LDL(低密度脂蛋白胆固醇)',
                            'type':'line',
                            'data': fourthjson,
                            'symbol':'circle',
                            'symbolSize':18,
                            'itemStyle':{
                                'normal':{
                                    'color':'#2c88b8',
                                    'lineStyle':{
                                        'color':'#2c88b8'
                                    }
                                }
                            }
                        }
                    ]
                })
            }
        },
        mounted(){
            let that = this;
            // input范围选择器
            var query = window.location.search;
            var url = query.split('?')[1].split('&')[0].split('=')[1]
            //获取ID
            // 获取血脂趋势数据
            $.ajax({
                url:"${URL_TESTREAULT_SEARCHRESULT}",
                type:"post",
                dataType:"json",
                data:{
                    idCard:url,
                    testKindCode:'502',
                    date:'month',
                    sort:'desc',
                    iDisplayLength:'10000'
                },
                success:function(data){
                    console.log(data)
                        // 获取对应数据 渲染页面
//                        if( data.dataList.length > 28 ){
//                            data.dataList = data.dataList.slice(0,28)
//                        }
                        that.bpjson = data.dataList;
                        var bpList = data.dataList.reverse();
                        for( var a = 0 ; a < bpList.length ; a++ ){
                            if( bpList[a].testItemCode === '502001' ){
                                that.BfInfo.firstjson.push(bpList[a].testValue);
                                that.BfInfo.data.push(bpList[a].testTime)
                            }else if( that.bpjson[a].testItemCode === '502002' ){
                                that.BfInfo.secondjson.push(bpList[a].testValue)
                            }else if( bpList[a].testItemCode === '502003'){
                                that.BfInfo.thirdjson.push(bpList[a].testValue)
                            }else if( bpList[a].testItemCode === '502004'){
                                that.BfInfo.fourthjson.push(bpList[a].testValue)
                            }
                        }
                        for( var i = 0 ; i < that.BfInfo.firstjson.length ; i++ ){
                            that.tablejson.push({
                                szy : that.BfInfo.firstjson[i],
                                ssy : that.BfInfo.secondjson[i],
                                xl :  that.BfInfo.thirdjson[i],
                                time : that.BfInfo.data[i],
                                change : ""
                            })
                            //  检测是否异常
                            if( that.BfInfo.firstjson[i] >= 5.72 || that.BfInfo.secondjson[i] >= 1.7 || that.BfInfo.secondjson[i] >= 1.55 ){
                                that.tablejson[i].change = "异常"
                            }
                        }
                        var endDate = that.add(1,data.endDate)
                        var startDate = that.add(1,data.startDate)
                        that.dates = [endDate,startDate]
                        //基于准备好的dom,初始化echart图表
                        var Chart = echarts.init(document.getElementById('mainBar'))
                        var select = {
                            'title' : {
                                'text':'血脂(mmHg)',
                                'textStyle':{
                                    'color':'#b0b0b0',
                                    'fontStyle':'normal',
                                    'fontWeight':'lignter',
                                    'fontSize':18
                                }
                            },
                            'tooltip' : {
                                'trigger': 'axis',
//                                'axisPointer':{
//                                    'show': true,
//                                    'type' : 'cross',
//                                    'lineStyle': {
//                                        'type' : 'dashed',
//                                        'width' : 1
//                                    }
//                                },
                                formatter:function(params){
                                    var str = ''
                                    for( var i = 0; i < params.length; i++ ){
                                        if( params.length === '0' || params[0].value.length != 2 ){
                                            str += ""
                                        }else{
                                            if( !params[i].data[1] ){
                                                params[i].data[1] = ""
                                            }
                                            str += params[i].marker+params[i].seriesName+":"+params[i].data[1]+"<br>"
                                        }
                                    }
                                    if( params.length === '0' || params[0].value.length != 2 ){
                                        str += ""
                                    }else{
                                        params.push({
                                            time : params[0].data[0]
                                        })

                                        str += '检查时间' + ':' + params[params.length-1].time
                                    }
                                    return str
                                }
                            },
                            'calculable' : true,
                            'grid':{
                                'left':'4%',
                                'right':'7%',
                                'top':'10%',
                                'bottom':'5%',
                                'containLabel':true,
                                'y2':50
                            },
                            'xAxis' : [{
                                'type':'time',
                                'boundaryGap':true,
                                'splitNumber':5,
                                'axisLabel':{
                                    'intreval':'auto',
                                    'textStyle':{
                                        'color':'black',
                                        'fontSize':'14'
                                    }
                                },
                                'splitLine':{
                                    'show':false
                                },
                                'axisLine':{
                                    'lineStyle':{
                                        'color':'#b6b6b6'
                                    }
                                },
                                'axisTick':{
                                    'show':false
                                }
                            }],
                            'yAxis' : [
                                {
                                    'max': 10,
                                    'min': 0,
                                    'type':'value',
                                    'axisLabel':{
                                        'intreval':0,
                                        'textStyle':{
                                            'color':'black',
                                            'fontSize':'16',
                                            'shadowOffset':-5
                                        }
                                    },
                                    'splitLine' : {
                                        'show' : false
                                    },
                                    'axisLabel' : {
                                        formatter: function(){
                                            return "";
                                        }
                                    },
                                    'axisLine':{
                                        'lineStyle':{
                                            'color':'#b6b6b6'
                                        }
                                    },
                                    'axisTick':{
                                        'show':false
                                    }
                                },
                                {
                                    'type':'value',
                                    'max': 15,
                                    'min': 0,
                                    'splitLine' : {
                                        'show' : false
                                    },
                                    'show':false,
                                    'axisLabel':{
                                        'intreval':0,
                                        'textStyle':{
                                            'color':'black',
                                            'fontSize':'16',
                                            'shadowOffset':-5
                                        }
                                    },
                                    'axisLabel' : {
                                        formatter: function(){
                                            return "";
                                        }
                                    },
                                    'axisLine':{
                                        'lineStyle':{
                                            'color':'#b6b6b6'
                                        }
                                    },
                                    'axisTick':{
                                        'show':false
                                    }
                                }
                            ],
                            'series' : [
                                {
                                    'name': 'x轴时间',
                                    'type': 'line',
                                    'data': (function () {
                                        var d = [];
                                        for( var len = 0; len < that.dates.length; len++ ){
                                            d.push([
                                                that.dates[len]
                                            ]);
                                        }
                                        return d;
                                    })()
                                },
                                {
                                    'name':'TC(总胆固醇)',
                                    'type':'line',
                                    'markLine':{
                                        'symbol' : 'none',
                                        'symbolSize' : [4, 2],
                                        'itemStyle' : {
                                            'normal': {
                                                'lineStyle': {'color':'red'},
                                                'barBorderColor':'red',
                                                'label':{
                                                    'position':'left',
                                                    'textStyle':{'color':'black'}
                                                }
                                            }
                                        },
                                        'data':[
                                            {
                                                'yAxis':5.72,
                                                'name':'5.72',
                                                'itemStyle':{
                                                    'normal':{
                                                        'color':'#3a85ff'
                                                    }
                                                }
                                            }
                                        ]
                                    },
                                    'data': (function () {
                                        var d = [];
                                        for( var len = 0; len < that.BfInfo.firstjson.length; len++ ){
                                            d.push([
                                                that.BfInfo.data[len],
                                                that.BfInfo.firstjson[len]
                                            ]);
                                        }
                                        return d;
                                    })(),
                                    'symbol':'circle',
                                    'symbolSize':18,
                                    'itemStyle':{
                                        'normal':{
                                            'color':'#3a85ff',
                                            'lineStyle':{
                                                'color':'#3a85ff'
                                            }
                                        }
                                    }
                                },
                                {
                                    'name':'TG(三酰甘油)',
                                    'type':'line',
                                    'markLine':{
                                        'symbol' : 'none',
                                        'symbolSize' : [4, 2],
                                        'itemStyle' : {
                                            'normal': {
                                                'lineStyle': {'color':'red'},
                                                'barBorderColor':'red',
                                                'label':{
                                                    'position':'left',
                                                    // formatter:function(params){
                                                    //     return 100;
                                                    // },
                                                    'textStyle':{'color':'black'}
                                                }
                                            }
                                        },
                                        'data':[
                                            {
                                                'yAxis':1.7,
                                                'name':'1.7',
                                                'itemStyle':{
                                                    'normal':{
                                                        'color':'#3a85ff'
                                                    }
                                                }
                                            }
                                        ]
                                    },
                                    'data': (function () {
                                        var d = [];
                                        for( var len = 0; len < that.BfInfo.secondjson.length; len++ ){
                                            d.push([
                                                that.BfInfo.data[len],
                                                that.BfInfo.secondjson[len]
                                            ]);
                                        }
                                        return d;
                                    })(),
                                    'symbol':'circle',
                                    'symbolSize':18,
                                    'itemStyle':{
                                        'normal':{
                                            'color':'#00d2cb',
                                            'lineStyle':{
                                                'color':'#00d2cb'
                                            }
                                        }
                                    }
                                },
                                {
                                    'name':'HDL-C(高密度脂蛋白胆固醇)',
                                    'type':'line',
                                    'markLine':{
                                        'symbol' : 'none',
                                        'symbolSize' : [4, 2],
                                        'itemStyle' : {
                                            'normal': {
                                                'lineStyle': {'color':'red'},
                                                'barBorderColor':'red',
                                                'label':{
                                                    'position':'left',
                                                    // formatter:function(params){
                                                    //     return 100;
                                                    // },
                                                    'textStyle':{'color':'black'}
                                                }
                                            }
                                        },
                                        'data':[
                                            {
                                                'yAxis':1.56,
                                                'name':'1.56',
                                                'itemStyle':{
                                                    'normal':{
                                                        'color':'#3a85ff'
                                                    }
                                                }
                                            }
                                        ]
                                    },
                                    'data': (function () {
                                        var d = [];
                                        for( var len = 0; len < that.BfInfo.thirdjson.length; len++ ){
                                            d.push([
                                                that.BfInfo.data[len],
                                                that.BfInfo.thirdjson[len]
                                            ]);
                                        }
                                        return d;
                                    })(),
                                    'symbol':'circle',
                                    'symbolSize':18,
                                    'itemStyle':{
                                        'normal':{
                                            'color':'#625bf7',
                                            'lineStyle':{
                                                'color':'#625bf7'
                                            }
                                        }
                                    }
                                },
                                {
                                    'name':'LDL(低密度脂蛋白胆固醇)',
                                    'type':'line',
                                    'data': (function () {
                                        var d = [];
                                        for( var len = 0; len < that.BfInfo.thirdjson.length; len++ ){
                                            d.push([
                                                that.BfInfo.data[len],
                                                that.BfInfo.fourthjson[len]
                                            ]);
                                        }
                                        return d;
                                    })(),
                                    'symbol':'circle',
                                    'symbolSize':18,
                                    'itemStyle':{
                                        'normal':{
                                            'color':'#2c88b8',
                                            'lineStyle':{
                                                'color':'#2c88b8'
                                            }
                                        }
                                    }
                                }
                            ]
                        };
                        Chart.setOption(select);
                        window.addEventListener("resize", function () {
                            Chart.resize();
                        })
                }
            })
            // 点击切换
            var buttons = $('.changelist button')
            for( var a = 0; a < buttons.length; a++ ){
                $(buttons[a]).on('click',function(){
                    $(this).addClass('active_button')
                    $(this).parent().siblings().find('button').removeClass('active_button')
                    if( $(this).text() === '周' ){
                        var n = 0;
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'502',
                                date:'week',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '月' ){
                        var n = 0;
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'502',
                                date:'month',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '季度' ){
                        var n = 0;
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'502',
                                date:'quarter',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '年' ){
                        var n = 0;
                        $.ajax({
                            url:"${URL_TESTREAULT_SEARCHRESULT}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url,
                                testKindCode:'502',
                                date:'year',
                                sort:'desc',
                                iDisplayLength:'10000'
                            },
                            success:function(data) {
                                console.log(data)
                                var endDate = that.add(1,data.endDate)
                                var startDate = that.add(1,data.startDate)
                                that.dates = [endDate,startDate]
                                that.changejson(data.dataList,n)
                            }
                        })
                    }else if( $(this).text() === '日' ){
                        var n = 1;
                        $.ajax({
                            url:"${URL_BF_PATIENTBFTESTS}",
                            type:"post",
                            dataType:"json",
                            data:{
                                idCard:url
                            },
                            success:function(data) {
                                if( data.dataList.length > 7 ){
                                    dataJosn = data.dataList.slice(0,7)
                                }else{
                                    dataJosn = data.dataList
                                }
                                that.changejson(dataJosn,n)
                            }
                        })
                    }
                })
            }
        }
    })
    // boot时间选择器插件
    $(document).ready(function() {
        initLayDate('#beginDate');
        initLayDate('#endDate');
    });
    var table;
    var begintime;
    var endtime;
    let that = this;
    // input范围选择器
    var query = window.location.search.substring(1);
    var vars = query.split("=");
    //获取ID
    var url = vars[1].toString()
    var idCard='${URL_BF_PATIENTBPTESTS}?idCard='+url
    function search(){
        refreshTable()
    }
    function initTable() {
        table = $('#example').DataTable({
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "bPaginate": true, //翻页功能
            "bSort": true, //排序功能
            "bAutoWidth": true,//自动宽度
            "info": false,
            "searching" : false, //去掉搜索框方法一
            'lengthChange' : false,
            "oPaginate":false,
            "bServerSide" : true,
            "lengthMenu": [10],
            "sAjaxSource":idCard,
            "sAjaxDataProp": "dataList",//查询后，返回的集合
            "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
                aoData.push(
                    {
                        "name": "startTime",
                        "value": $('#beginDate').val()
                    },
                    {
                        "name": "endTime",
                        "value": $('#endDate').val()
                    }
                ),
                    $.ajax( {
                        "dataType": 'json',
                        "url": '${URL_BF_PATIENTBFTESTS}'+sSource,
                        "type":'post',
                        "data": aoData,
                        "success": function(resp){
                            var map = {},
                                dest = [];
                            testtime = [];
                            szy = [];
                            xl = [];
                            ssy = [];
                            if( resp.dataList.length != '0' ){
                                var arr = resp.dataList;
                                for( var a = 0 ; a < arr.length; a++ ){
                                    dest.push({
                                        change : "",
                                        time : arr[a].TestTime,
                                        valueTc : arr[a].valueTc,
                                        valueTg : arr[a].valueTg,
                                        valueHdl : arr[a].valueHdl,
                                        valueLdl : arr[a].valueLdl
                                    })
                                    if( dest[a].valueTc >= 5.72  || dest[a].valueTg >= 1.7 || dest[a].valueHdl >= 1.55 ){
                                        dest[a].change = '异常'
                                    }else{
                                        dest[a].change = ''
                                    }
                                }
                                resp.dataList = dest;
                                resp.iTotalDisplayRecords = dest.length;
                                fnCallback(resp)
                            }else{
                                resp.dataList = []
                                fnCallback(resp)
                            }
                        }
                    } );
            },
            "aoColumns" : [ {
                "targets": 0,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<span style="color:red">'+oData.change+'</span>')
//                        $(nTd).text(oData.change)
                }
            },{
                "mDataProp" : "time"
            },{
                "targets": 1,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if( oData.valueTc === undefined ){
                        $(nTd).text("")
                    }else{
                        if( oData.valueTc >= 5.72 ){
                            $(nTd).html('<span style="color:red">'+oData.valueTc+'</span>')
                        }else{
                            $(nTd).text(oData.valueTc)
                        }
                    }
                }
            },{
                "targets": 2,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if( oData.valueTg === undefined ){
                        $(nTd).text("")
                    }else{
                        if( oData.valueTg >= 1.7 ){
                            $(nTd).html('<span style="color:red">'+oData.valueTg+'</span>')
                        }else{
                            $(nTd).text(oData.valueTg)
                        }
                    }
                }
            },{
                "targets": 3,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if( oData.valueHdl === undefined ){
                        $(nTd).text("")
                    }else{
                        if( oData.valueHdl >= 1.55 ){
                            $(nTd).html('<span style="color:red">'+oData.valueHdl+'</span>')
                        }else{
                            $(nTd).text(oData.valueHdl)
                        }
                    }
                }
            },{
                "targets": 4,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if( oData.valueLdl === undefined ){
                        $(nTd).text("")
                    }else{
                        if( oData.valueLdl >= 3.12 ){
                            $(nTd).html('<span style="color:red">'+oData.valueLdl+'</span>')
                        }else{
                            $(nTd).text(oData.valueLdl)
                        }
                    }
                }
            }],
            "oLanguage": {//插件的汉化
                "sLengthMenu": "32",
                "sZeroRecords" : "抱歉， 没有找到",
                "sInfoEmpty" : "没有数据",
                "sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
                "oPaginate" : {
                    "sFirst" : "",
                    "sPrevious" : "<b>上一页<b>",
                    "sLast" : "",
                    "sNext" : "<i>下一页</i>"

                },
                "sZeroRecords" : "没有检索到数据",
                "sProcessing" : "<img src='' />",
                "sSearch" : "搜索"
            }
        });
    }
    initTable()
</script>
</body>
</html>
